<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Circle as CircleStyle, Fill, Icon, Stroke, Style, Text} from 'ol/style';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {Point} from 'ol/geom';
    import icon from './image/icon.png'

    export default {
        name: "VectorStyleLayer",
        mounted() {
            const image = new CircleStyle({
                radius: 5,
                fill: null,
                stroke: new Stroke({
                    color: 'red',
                    width: 1
                }),
            });

            const styles = {
                'Point': new Style({
                    image: image,
                }),
                'LineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiLineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiPoint': new Style({
                    image: image,
                }),
                'MultiPolygon': new Style({
                    stroke: new Stroke({
                        color: 'yellow',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 0, 0.1)',
                    }),
                }),
                'Polygon': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        lineDash: [4],
                        width: 3,
                    }),
                    fill: new Fill({
                        color: 'rgba(0, 0, 255, 0.1)',
                    }),
                }),
                'GeometryCollection': new Style({
                    stroke: new Stroke({
                        color: 'magenta',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'magenta',
                    }),
                    image: new CircleStyle({
                        radius: 10,
                        fill: null,
                        stroke: new Stroke({
                            color: 'magenta',
                        }),
                    }),
                }),
                'Circle': new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.2)',
                    }),
                }),
            };
            //定义 样式方法，每个要素渲染时都会回调这个样式的方法
            //要注意的是，这里返回的是一个样式对象

            // const styleFunction = function (feature) {
            //     //根据要素的几何数据类型获取针对几何数据类型的样式
            //     return styles[feature.getGeometry().getType()];
            // };
            // const vectorSource = new VectorSource({
            //     url: 'http://localhost:8888/openlayer/geojson/china.json',
            //     format: new GeoJSON(),
            // });
            const vectorSource = new VectorSource();
            let vectorLayer = new VectorLayer({
                source: vectorSource,
                //style: styleFunction,
            })
            this.map = new Map({
                layers: [new TileLayer({
                    source: new OSM()
                }), vectorLayer],
                target: 'map',
                view: new View({
                    center: [116.38916015624999, 39.926588421909436],
                    projection: "EPSG:4326", //指定投影
                    zoom: 4,
                }),
            });
            this.addFeatureStyle(vectorSource);
        },
        methods: {
            addFeatureStyle(vectorSource) {
                fetch('http://localhost:8888/openlayer/geojson/china.json')
                    .then(response => response.json())
                    .then((json) => {
                        console.log(json)
                        //读取矢量数据为要素
                        const features = new GeoJSON().readFeatures(json);
                        vectorSource.addFeatures(features);
                        //遍历每一个要素对象
                        for (const feature of features) {
                            //对每一个要素对象都设置一个单独的样式
                            feature.setStyle(new Style({
                                stroke: new Stroke({
                                    color: 'magenta',
                                }),
                                fill: new Fill({color: "#4e98f444"}),
                            }));
                            console.log(feature)
                            //获取到每个要素数据的centroid，name属性数据
                            let center = feature.get("centroid");
                            let name = feature.get("name");
                            if (center && name) {
                                //构建一个要素数据
                                let pointFeature = new Feature({
                                    geometry: new Point(center), //几何信息
                                });
                                //给点设置要素样式
                                pointFeature.setStyle(new Style({
                                    image: new Icon({//设置图片是icon
                                        src: icon
                                    }),
                                    text: new Text({
                                        //文本内容//设置该点要素的文本信息
                                        text: name,
                                        //文本填充样式（即文字颜色）
                                        fill: new Fill({color: '#ff3300'}),
                                    }),
                                    zIndex: 9999//设置css的z-index层级关系
                                }))
                                //重新克隆一个点要素
                                let clone = pointFeature.clone();
                                //重新给点要素设置样式
                                clone.setStyle(new Style({
                                    image: new CircleStyle({
                                        radius: 10,
                                        stroke: new Stroke({
                                            color: 'red',
                                            width: 10
                                        }),
                                    })
                                }))
                                //将两个要素数据添加到数据中
                                vectorSource.addFeatures([pointFeature, clone]);
                            }
                        }
                        //当前视口适配到数据源的范围
                        this.map.getView().fit(vectorSource.getExtent());
                    });
            }
        }


    }
</script>

<style scoped>

</style>